<template>
  <div>
    <div class="tengkeEd">
      <div class="banner" :style="{backgroundImage:'url(' + banner+ ')'}">
        <div class="banner-title">
          <div class="title1">关于腾科教育中心</div>
          <div class="title2">ABOUT US</div>
        </div>
      </div>
      <div class="content02-wrap">
        <div class="centre">
          <div class="centre-title">
            <span>关于腾科教育中心</span>
            <span class="seat">首页 > 关于腾科教育中心</span>
          </div>
          <div class="synopsis">
            <div class="diamond"></div>腾科简介
          </div>
          <p class="centre-itwm">
            上海腾科教育科技有限公司创立于2010年，是一家有着十年的教育文化，深入ICT行业的公司。同时
            在
            <span class="special">计算机网络服务领域和数据库技术开发、管理领域</span> 中深入钻研，是中国ICT产业链中权威认证技术
            培训公司。公司核心业务区域覆盖江浙沪区域。腾科教育一直秉持高校、企业、学员、腾科共赢的“
            多赢”原则，积极与各高校开展合作，合作企业提供专业共建、实验室建设解决方案并解决就业出口
            ，为学员提供良好的学习氛围及学习环境，为企业提供理论与实践结合的新型高端IT技术人才。<br/><br/>
            公司通过开展“双师认证”、“助力教改、双证融通”、技术峰会等一系列项目培养了无数新型IT高级
            人才。以及开展了学员和企业的专项技术比赛、校长俱乐部、IT精英俱乐部、腾科技术嘉年华等活
            动来促进学员、院校、企业与公司的和谐发展和紧密联系。以及与企业院校就人才建设、工程硕士
            联合培养、;专业合办、实验室共建、专业课嵌入、校内外委托培养、高校师资培养、实习实训、专
            项训练营等众多项目进行着广泛的合作。<br/><br/>
            腾科教育目前员工数已经超过60人，公司以“为了学生的一切”为使命责任，一直带着十年的教育沉
            淀与对教育的热爱开展全面的业务活动。对高校学生专项技术技能培养培训，学生的每一项专项技
            术培养都结合学习基础、传授知识和巩固学习内容并且与实际操作活动相结合，使学生能够学以致
            用。对企业定制技术技能提升的专属培训，为企业提供专属方案、结合市场走向来提供对口方案和
            不断对企业人才提供技术性知识
          </p>
        </div>
        <div class="ambient-wrap">
          <div class="synopsis">
            <div class="diamond"></div>教学环境
          </div>
          <div class="ambient-img-wrap">
            <div style="position:relative;">
              <img class="big-img" :src="ambient[activeAmbientIndex]" />
              <div class="arrow left-arrow" @click="clickBigImg(-1)" :style="{backgroundImage:'url('+leftArrow+')'}"></div>
              <div class="arrow right-arrow" @click="clickBigImg(1)" :style="{backgroundImage:'url('+rightArrow+')'}"></div>
            </div>
            <div class="small-img-wrapper">
              <div class="item-wrapper" ref='niubidage'>
                <div ref='niubi' class="niubi">
                  <div style="position:relative;overflow:hidden;" v-for='(item,index) in ambient' :key='index' @click='clickItem(index)'>
                    <img :src='item' class="small-img" />
                    <div class="mark" v-if='activeAmbientIndex!==index'></div>
                  </div>
                </div>
                <!-- <div></div> -->
              </div>
              <div class="s-arrow top-arrow" @click="clickSmallImg(-1)" :style="{backgroundImage:'url('+topArrow+')'}"></div>
              <div class="s-arrow bottom-arrow" @click="clickSmallImg(1)" :style="{backgroundImage:'url('+downArrow+')'}"></div>
            </div>
          </div>
        </div>
        <div class="intelligence-wrap">
          <div class="synopsis">
            <div class="diamond"></div>资质认证
          </div>
          <div class="intelligence">
            <div class="intelligence-content" v-for="(item,index) in intelligence" :key="index">
              <img :src="item.img" class="intelligence-img" style="width: 265px;height: 265px;"/>
              <div class="intelligence-text">{{item.text}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import banner from "./img/banner.jpg";
import trophy01 from "./img/trophy01.png"
import trophy02 from "./img/trophy02.png"
import trophy03 from "./img/trophy03.png"
import trophy04 from "./img/trophy04.png"
import trophy05 from "./img/trophy05.png"
import trophy06 from "./img/trophy06.png"
import trophy07 from "./img/trophy07.png"
import trophy08 from "./img/trophy08.png"

import ambient01 from "./img/ambient01.png"
import ambient03S from "./img/ambient03-small.png"
import ambient04S from "./img/ambient04-small.png"
import ambient05S from "./img/ambient05-small.png"
import ambient06S from "./img/ambient06-small.png"
import leftArrow from "./img/left-arrow.png"
import rightArrow from "./img/right-arrow.png"
import topArrow from "./img/up-arrow.png"
import downArrow from "./img/down-arrow.png"


export default {
  data() {
    return {
      banner,leftArrow,rightArrow,topArrow,downArrow,
      translateBase: 98,          //小图的位移基数
      activeAmbientIndex:0,        //当前正在被激活的大图
      ambient:[ambient01,ambient03S,ambient04S,ambient05S,ambient06S,ambient04S,ambient05S],    //大图数据
      intelligence:[
        {
          img:trophy01,
          text:"2018红帽最佳合作伙伴",
        },
        {
          img:trophy02,
          text:"HCIE",
        },
        {
          img:trophy03,
          text:"工程师大赛",
        },
        {
          img:trophy04,
          text:"华为HCIE",
        },
        {
          img:trophy05,
          text:"华为ICT2018",
        },
        {
          img:trophy06,
          text:"华为名师授业",
        },
        {
          img:trophy07,
          text:"华为优选级合作伙伴",
        },
        {
          img:trophy08,
          text:"学校合作",
        },
      ]
    };
  },
  methods:{
    clickBigImg(num){    //点击大图切换上/下一张
      const {activeAmbientIndex,ambient} = this
      let index = activeAmbientIndex + num
      // 如果当前激活索引加上num后，范围仍然在this.ambient数组的索引内，就执行切换图片
      if(index>=0 && index<=ambient.length-1){
        this.activeAmbientIndex = index
      }
    },
    clickSmallImg(num){//点击小图切换上/下一张
      const {activeAmbientIndex,ambient,translateBase} = this
      let index = activeAmbientIndex + num
      if(index>=0 && index<=ambient.length-1){
        let data = num || num == 0 ? -translateBase*index : translateBase*index
        // this.clickBigImg(num)
        this.activeAmbientIndex = index
        let obj = this.getOffestTop()
        if(data <= obj[1]) return
        this.$refs.niubi.style.top = data+'px'
      }
    },
    clickItem(index){   //点击每一个小图
      this.activeAmbientIndex = index     //点谁，大图就谁被激活
    },
    getOffestTop(){     //获取niubi距离最近父元素的顶部距离
      const {offsetHeight} = this.$refs.niubidage
      const {offsetHeight:offsetHeightNiubi,offsetTop} = this.$refs.niubi
      this.translateBase= offsetHeight / 5    //因为可见图片只展示5张
      return [0,offsetHeight-offsetHeightNiubi]     //返回极限值，
    }
  },
  mounted(){
    this.getOffestTop()                     
    window.onresize = () => {
      setTimeout(()=>{      //如果用户缩放页面，1s后自动修正小图位移值
        this.translateBase= this.$refs.niubidage.offsetHeight / 5    
        this.$refs.niubi.style.transition = 'none'      //先去除过渡效果          
        this.$refs.niubi.style.top = '0'                //把位移变为0
        this.clickSmallImg(0)                           //位移到之前的位置，因为不加不减，所以传0
        setTimeout(()=>{
          this.$refs.niubi.style.transition = 'all 100ms'   //移完之后加回过渡效果，给下次点击箭头加减时用
        },100)
      },1000)
    }
  }
};
</script>
<style lang="stylus">
.tengkeEd {
  .banner {
    width: 1440px;
    height: 480px;
    background-color: #ff3343;
    background-size: auto 100%;
    position: relative;
    padding-top: 140px;

    .banner-title {
      margin-left: 120px;
      position: relative;

      .title1 {
        font-size: 28px;
        color: #f4f4f4;
      }

      .title2 {
        font-family: Humanist521BT-Light;
        font-size: 24px;
        line-height: 17px;
        color: #c9c9c9;
        margin-top: 21px;
      }
    }
  }

  .content02-wrap {
    width: 1200px;
    margin-left 120px
    .centre {
      height: 503px;
      margin-top -134px
      position relative
      background-color: #ffffff;
      padding: 39px 40px 80px 39px;
      .centre-title{
        display flex
        justify-content space-between
        font-size: 28px;
        line-height: 40px;
        color: #1b1b1b;
        margin-bottom 41px
        .seat{
          font-family: MicrosoftYaHeiLight;
          font-size: 12px;
          color: #666666;
          }
        }
    }
      .synopsis{
        display flex
        font-size: 24px;
        color: #1b1b1b;
        align-items center
        margin-bottom 39px
        .diamond{
          width: 11px;
	        height: 11px;  
          margin-right 10px
          background-color: red;   
          transform:rotate(45deg);   
          -ms-transform:rotate(45deg); /* Internet Explorer */   
          -moz-transform:rotate(45deg); /* Firefox */   
          -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   
          -o-transform:rotate(45deg); /* Opera */   
        }
      }
      .centre-itwm{
        width: 1117px;
        height: 254px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 24px;
        letter-spacing: 0px;
	      color: #666666;
        .special{
          font-size: 14px;
          font-weight: bold;
          color: #1b1b1b;
        }
      }
    .ambient-wrap{
      width: 1200px;
      height: 698px;
      background-color: #ffffff;
      padding 40px 39px 69px 40px
      margin-top 20px
      .ambient-img-wrap{
        display flex;
        justify-content center
        align-items center
        .big-img{
          width: 690px;
          height: 517px;
        }
        .arrow{
          position absolute;
          width 45px;
          height 100px;
          top:50%;
          transform translateY(-50%)
          background rgba(0,0,0,.5);
          background-size 21px 39px;
          background-repeat no-repeat
          background-position center center
        }
        .left-arrow{
          left 0;
        }
        .right-arrow{
          right 0
        }
        .small-img-wrapper{
          overflow hidden;
          margin-left 20px;
          position relative
          height 100%;
          padding 20px 0
          .item-wrapper{
            position relative
            height 488px;
            width 117px;
            // background pink;
            overflow hidden;
            .niubi{
              position relative
              top 0
              transition all 100ms
            }
          }
          .small-img{
            margin-top 10px;
            width 117px;
            height 88px;
            display block;
          }
          .mark{
            position absolute
            width 117px;
            height 88px;
            top:10px;
            background rgba(255,255,255,.5)
            // border-top 1px solid red
          }
          .s-arrow{
            position absolute
            width 117px;
            height: 20px;
            left 0
            background-size 17px 10px;
            background-repeat no-repeat
            background-position center center
            // background-color: rgba(0,255,0,.2);
          }
          .top-arrow{
            top 0
          }
          .bottom-arrow{
            bottom:0
          }
        }
        .img01-wrap{
          width: 690px;
          height: 517px;
        }
        .el-carousel__container{
          height 517px
        }
      }
    } 
    .intelligence-wrap{
      width: 1200px;
      // height: 816px;
      background-color: #ffffff;
      margin-top 20px
      padding 39px 35px 80px 35px
      .intelligence{
        display flex
        flex-wrap wrap
        justify-content space-between
        .intelligence-content{
          margin-bottom 41px
          .intelligence-img{
            width: 265px;
            height: 265px;
          }
          .intelligence-text{
              font-size: 14px;
              line-height: 24px;
              color: #1b1b1b;
              margin-top 20px
          }
          }
      }
    }  
  }
}
</style>